<!DOCTYPE html>
<p>There should be a blue rectangle centered at the bottom of a brown rectangle.</p>
<div id="house" style="position:relative; columns:3; column-gap:0; line-height:20px; width:120px; orphans:1; widows:1; background:brown;">
    <br>
    <br>
    <br>
    <div id="doorTop" style="float:left; width:100%; margin-top:20px; background:blue;"><br></div>
    <div style="clear:both;">
        <div id="doorBottom" style="background:blue;"><br></div>
        <br>
        <br>
    </div>
</div>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
test(() => {
    var house = document.getElementById("house");
    var doorTop = document.getElementById("doorTop");
    var doorBottom = document.getElementById("doorBottom");
    assert_equals(house.offsetHeight, 60);
    assert_equals(doorTop.offsetTop, 20);
    assert_equals(doorTop.offsetHeight, 20);
    assert_equals(doorBottom.offsetTop, 40);
    assert_equals(doorBottom.offsetHeight, 20);
}, "Float that should be pushed to the top of the second column.");
</script>
